<template>
  <view class="container">

	<!-- 搜索栏容器 -->
	<view class="search-bar">
	  <!-- 输入框包裹容器 -->
	  <view class="input-wrapper">
	    <input 
	      class="search-input" 
	      placeholder="请输入会议名称/关键词" 
	      v-model="searchKeyword"
	      @confirm="handleSearch"
	    />
	    <!-- 搜索图标（绝对定位在输入框内部右侧） -->
	    <uni-icons 
	      class="search-icon" 
	      type="search" 
	      size="20" 
	      color="#999" 
	      @click="handleSearch"
	    />
	  </view>
	
	  <!-- 取消按钮 -->
	  <button 
	    class="cancel-button" 
	    @click="handleCancelSearch"
	    v-if="searchKeyword"
	  >
	    取消
	  </button>
	</view>
    <!-- 日期分段器 -->
    <scroll-view scroll-x class="segmented-control">
      <view 
        v-for="(item, index) in dateOptions" 
        :key="index" 
        :class="['segment-item', activeDate === item.value ? 'active' : '']"
        @click="handleFilterChange(item.value, 'date')"
      >
        {{ item.text }}
      </view>
    </scroll-view>

    <!-- 类型分段器 -->
    <scroll-view scroll-x class="segmented-control">
      <view 
        v-for="(item, index) in typeOptions" 
        :key="index" 
        :class="['segment-item', activeType === item.value ? 'active' : '']"
        @click="handleFilterChange(item.value, 'type')"
      >
        {{ item.text }}
      </view>
    </scroll-view>

    <!-- 卡片列表 -->
    <scroll-view class="scroll-view" scroll-y>
      <view v-if="isLoading" class="loading">
        <uni-load-more status="loading"></uni-load-more>
      </view>
      
      <view v-for="card in meetings" :key="card.id" class="card-container">
        <view class="card">
          <!-- 封面图 -->
          <image class="cover-image" :src="card.coverImage" mode="aspectFill"></image>
          <!-- 文字描述部分 -->
          <view class="description">
            <!-- 标题 -->
            <text class="title">{{ card.title }}</text>
            <!-- 时间 -->
            <view class="info-row">
              <uni-icons type="notification" size="20" color="#fff"></uni-icons>
              <text class="details">时间：{{ card.time }}</text>
            </view>
            <!-- 地点 -->
            <view class="info-row">
              <uni-icons type="map-pin-ellipse" size="20" color="#fff"></uni-icons>
              <text class="details">地点：{{ card.location }}</text>
            </view>
            <!-- 订阅按钮 -->
            <view class="button-container">
              <button class="subscribe-button">订阅</button>
            </view>
          </view>
        </view>
      </view>
      
      <view v-if="!isLoading && meetings.length === 0" class="empty-tip">
        暂无数据
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { getFilteredMeetings } from '@/api/meet.js';

// 分段器选项配置
const dateOptions = [
  { value: 'all', text: '全部议程' },
  { value: '4-19', text: '4月19日' },
  { value: '4-25', text: '4月25日' },
  { value: '5-8', text: '5月8日' },
  { value: '5-17', text: '5月17日' },
  { value: '5-18', text: '5月18日' }
];

const typeOptions = [
  { value: 'all', text: '全部类型' },
  { value: 'main', text: '主论坛' },
  { value: 'parallel', text: '平行会议' },
  { value: 'science', text: '科普论坛' },
  { value: 'launch', text: '新品发布' },
  { value: 'eco', text: '生态合作论坛' }
];

// 状态管理
const activeDate = ref('all');
const activeType = ref('all');
const meetings = ref([]);
const isLoading = ref(false);




//搜索栏
const searchKeyword = ref('');




// 分段器选择处理
const handleFilterChange = (value, filterType) => {
  if(filterType === 'date') {
    activeDate.value = value;
  } else if(filterType === 'type') {
    activeType.value = value;
  }
  fetchData();
};

// 数据获取
const fetchData = async () => {
  try {
    isLoading.value = true;
    const res = await getFilteredMeetings({
      date: activeDate.value,
      type: activeType.value,
	  keyword: searchKeyword.value // 新增搜索参数
    });
    meetings.value = res.data; // 直接替换当前数据
  } catch (error) {
    uni.showToast({ title: '加载失败', icon: 'none' });
  } finally {
    isLoading.value = false;
  }
};

// 初始化加载
fetchData();
//处理搜索
const handleSearch = () => {
  fetchData(); // 直接触发筛选
};

// 取消搜索
const handleCancelSearch = () => {
  searchKeyword.value = ''; // 清空输入框
  fetchData(); // 重新获取数据
};
</script>

<style scoped>
/* 外层容器 */
.container {
  padding: 20rpx;
}
/* 搜索栏容器 */
.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f5f5f5;
  
  margin-bottom: 20rpx;
}

/* 输入框包裹容器 */
.input-wrapper {
  position: relative; /* 作为图标定位的父容器 */
  flex: 1; /* 占据剩余空间 */
  margin-right: 20rpx; /* 为取消按钮预留间距 */
}

/* 输入框样式 */
.search-input {
  width: 85%;
  padding: 0 60rpx 0 20rpx; /* 右侧留出图标空间 */
  height: 60rpx;
  font-size: 28rpx;
  background: white;
}

/* 搜索图标（定位在输入框内部右侧） */
.search-icon {
  position: absolute;
  right: 20rpx; /* 相对于输入框右侧定位 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* 取消按钮 */
.cancel-button {
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #3AB54A;
  background: transparent;
}
/* 滚动视图 */
.scroll-view {
  width: 100%;
  height: calc(100vh - 150rpx); /* 调整滚动区域高度 */
}

/* 卡片容器 */
.card-container {
  margin-bottom: 40rpx; /* 设置卡片之间的垂直间距 */
}

/* 卡片样式 */
.card {
  width: 90%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 0 auto; /* 居中显示 */
}

/* 封面图片 */
.cover-image {
  display: block;
  width: 100%;
  height: 200px; /* 根据需要调整高度 */
}

/* 描述部分 */
.description {
  background-color: #123e7d; /* 蓝色背景 */
  padding: 10px;
  color: white;
  position: relative; /* 为按钮定位做准备 */
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 23px;
  margin-left: 10px;
  display: block;
  margin-top: 15px;
}

.info-row {
  display: flex;
  align-items: center; /* 图标和文字垂直对齐 */
  margin-bottom: 4px;
  margin-left: 10px;
}

.info-row uni-icons {
  margin-right: 8px; /* 图标与文字的间距 */
}

.details {
  font-size: 11px;
  line-height: 1.4;
}

.button-container {
  position: absolute;
  right: 15px;
  bottom: 40px;
}

.subscribe-button {
  background-color: #48ad9c;
  color: white;
  font-size: 11px;
  padding: 0px 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.segment-item.active {
  font-weight: bold;
  transition: all 0.3s;
}
.container {
  padding: 20rpx;
}

.segmented-control {
  display: flex;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  margin-bottom: 20rpx;
}

.segment-item {
  display: inline-block;
  padding: 15rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  text-align: center;
  cursor: pointer;
  position: relative; /* 用于定位下划线 */
}

/* 选中状态 */
.segment-item.active {
  color: #3AB54A; /* 文字颜色 */
}

/* 下划线 */
.segment-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4rpx; /* 下划线高度 */
  background-color: #3AB54A; /* 下划线颜色 */
  border-radius: 2rpx; /* 圆角效果 */
}

/* 滚动条样式隐藏 */
.segmented-control::-webkit-scrollbar {
  display: none;
}
/* 保留原有样式，新增以下状态样式 */
.loading {
  padding: 20px;
  text-align: center;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 20px;
}
</style>